
import React, {Component} from 'react';
import {StyleSheet, Text, View,Image,
  ImageBackground,
  Dimensions,
  TouchableOpacity,SafeAreaView
} from 'react-native';
import TopBar from '../bar/TopBar'
import BASEURL from '../api/api'
import Swiper from 'react-native-swiper';
import DeviceStorage from '../common/DeviceStorage'
import Toast, {DURATION} from 'react-native-easy-toast'
import {unitWidth, width,uWidth} from "../common/Utils";
//var {height, width} = Dimensions.get('window');
export default class App extends Component {
  static navigationOptions = ({ navigation }) =>{
    return{
      headerTitle:<TopBar title='水电站' navigation = {navigation}/>,
      headerLeft:null,
    }
  };
  constructor(props){
    super(props)
    this.state=({
      data:{}
    })
    DeviceStorage.get('areaCode').then((areaCode)=>{
        if(areaCode){
          this.fetchData(areaCode)
        } 
    })
    //console.log('unitWidth',unitWidth)
    //console.log('width',width)
  }
  fetchData(areaCode){
    fetch(BASEURL+'getIndex?areaCode='+areaCode)
    .then(res=>res.json())
    .then(result=>{
      //console.log('res',result)
      if(result.falg){
        this.setState({
          data:result,
        })
      } else{
        this.refs.toast.show('获取失败');
      }
    })
    .catch(err=>{
      this.refs.toast.show('获取失败');
    })
  }
  go(type){
    //console.log('props',this.props)
    if(type == 1){
      this.props.navigation.push('stationInfo')
    }else if(type == 2){
      this.props.navigation.push('monitorInfo')
    }else if(type == 3){
      this.props.navigation.push('noticeList')
    } else if(type == 4){
      this.props.navigation.push('applyList')
    }
  }
  render() {
    let data = this.state.data
    return (
      <SafeAreaView style={[styles.container,{backgroundColor:'#fff'}]}>
        <View style={styles.swiper}>
          <Swiper style={styles.wrapper} showsButtons={false} autoplay={true} height={150}>
            <View style={styles.slide}>
              <Image resizeMode='stretch' style={styles.swiperImg} source={require('../images/swiper-img1.png')}/>
            </View>
            <View style={styles.slide}>
              <Image resizeMode='stretch' style={styles.swiperImg} source={require('../images/swiper-img2.png')}/>
            </View>
            <View style={styles.slide}>
              <Image resizeMode='stretch' style={styles.swiperImg} source={require('../images/swiper-img3.png')}/>
            </View>
          </Swiper>
        </View>
        <View style={styles.box}> 
          <TouchableOpacity style={styles.leftBox} activeOpacity={0.6} onPress={()=>this.go(1)}>
            <ImageBackground source={require('../images/message_bg1.png')} style={styles.bgImg} imageStyle={styles.bgImage}>
              <Image source={require('../images/icon-powermessage.png')} style={styles.oneImg}></Image>
              <Text style={styles.titleText}>电站信息</Text>
              <View style={styles.textBox}>
                <View style={styles.statText}>
                  <Text style={styles.oneText}>电站总数</Text>
                  <View style={styles.row}>
                    <Text style={[styles.oneText,styles.largeText]}>{data.empNum}</Text>
                    <Text style={styles.oneText}>座</Text>
                  </View>
                </View>
                <View style={styles.statText}>
                  <Text style={styles.oneText}>装机容量</Text>
                  <View style={styles.row}>
                    <Text style={[styles.oneText,styles.largeText]}>{data.comCapacitySum}</Text>
                    <Text style={styles.oneText}>MW</Text>
                  </View>
                </View>
              </View>
            </ImageBackground>
          </TouchableOpacity>
          <TouchableOpacity style={styles.rightBox} activeOpacity={0.6} onPress={()=>this.go(2)}>
            <ImageBackground source={require('../images/message_bg5.png')} style={styles.bgImg} imageStyle={styles.bgImage}>
              <Image source={require('../images/icon-monitormessage.png')} style={styles.oneImg}></Image>
              <Text style={styles.titleText}>监测信息</Text>
              <View style={styles.textBox}>
                <View style={styles.statText}>
                  <Text style={styles.oneText}>已监测电站</Text>
                  <View style={styles.row}>
                    <Text style={[styles.oneText,styles.largeText]}>{data.monitorNum}</Text>
                    <Text style={styles.oneText}>座</Text>
                  </View>
                </View>
                <View style={styles.statText}>
                  <Text style={styles.oneText}>预警电站</Text>
                  <View style={styles.row}>
                    <Text style={[styles.oneText,styles.largeText]}>{data.warningNum}</Text>
                    <Text style={styles.oneText}>座</Text>
                  </View>
                </View>
              </View>
            </ImageBackground>
          </TouchableOpacity>
        </View>
        <View style={styles.box}> 
          <TouchableOpacity style={styles.leftTwoBox} activeOpacity={0.6} onPress={()=>this.go(3)}>
            <ImageBackground source={require('../images/message_bg2.png')} style={styles.bgImg} imageStyle={styles.bgImage}>
              <Image source={require('../images/icon-notice.png')} style={styles.twoImg}></Image>
              <Text style={styles.titleText}>通知公告</Text>
              <View style={styles.textBox}>
                <View style={styles.statText}>
                  <Text style={styles.oneText}>总条数</Text>
                  <View style={styles.row}>
                    <Text style={[styles.oneText,styles.largeText]}>{data.noticeNum}</Text>
                    <Text style={styles.oneText}>条</Text>
                  </View>
                </View>
              </View>
            </ImageBackground>
          </TouchableOpacity>
          <TouchableOpacity style={styles.rightTwoBox} activeOpacity={0.6} onPress={()=>this.go(4)}>
            <ImageBackground source={require('../images/message_bg4.png')} style={styles.bgImg} imageStyle={styles.bgImage}>
              <Image source={require('../images/icon-messagesend.png')} style={styles.twoImg}></Image>
              <Text style={styles.titleText}>停运申请</Text>
              <View style={styles.textBox}>
                <View style={styles.statText}>
                  <Text style={styles.oneText}>审核信息</Text>
                  <View style={styles.row}>
                    <Text style={[styles.oneText,styles.largeText]}>{data.applyNum}</Text>
                    <Text style={styles.oneText}>条</Text>
                  </View>
                </View>
              </View>
            </ImageBackground>
          </TouchableOpacity>
        </View>
        <Toast ref="toast" position='bottom' positionValue={200}/>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  row:{
    flexDirection:'row',
    alignItems:'center'
  },
  textBox:{
    width:'100%',
    paddingLeft:10,
    paddingRight:10,
  },  
  largeText:{
    fontSize:28*uWidth,
  },  
  oneText:{
    fontSize:16*uWidth,
    color:'white',
  },
  statText:{
    paddingBottom:5,
    width:'100%',
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center'
  },
  titleText:{
    padding:8,
    fontSize:18*uWidth,
    color:'white',
    fontWeight:'bold',
  },  
  oneImg:{
    width:64*uWidth,
    height:64*uWidth,
    resizeMode:'contain'
  },
  twoImg:{
    width:38*uWidth,
    height:38*uWidth,
    resizeMode:'contain'
  },
  box:{
    flexDirection:'row',
  },
  bgImage:{
    borderRadius:5,
  },
  bgImg:{
    flex:1,
    width:'100%',
    height:'100%',
    justifyContent:'center',
    alignItems:'center',
  },
  leftBox:{
    width:width*0.5-8,
    margin:5,
    marginRight:3,
    height:(width*0.5-8)*1.13,
    borderRadius:5,
  },
  rightBox:{
    width:width*0.5-10,
    margin:5,
    marginLeft:3,
    height:(width*0.5-8)*1.13,
    borderRadius:5,
  },
  leftTwoBox:{
    width:width*0.5-8,
    margin:5,
    marginRight:3,
    height:(width*0.5-8)*0.8,
    borderRadius:3,
  },
  rightTwoBox:{
    width:width*0.5-10,
    margin:5,
    marginLeft:3,
    height:(width*0.5-8)*0.8,
  },
  swiperImg:{
    width,
    flex:1,
  },
  wrapper:{
    //flex:1,
  },
  swiper:{
    height:150,
    width:'100%',
  },
  slide: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'transparent',
  },
  container: {
    flex: 1,
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});
